<template>
  <div class="contain">
    <div class="top">
      <span>分类</span>
      <img src="icon_search_darkblack2.png" alt="" />
    </div>
    <div class="bottom">
      <div class="left">
       <ul>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
         <li><a href="">有品推荐</a></li>
       </ul>
      </div>
      <div class="right">
       <div class="top">
          <img src="eff9ca18_3328_4a08_9ab8_4556eeaa48fd.png" alt="">
       </div>
       <div class="sort">
         <h3>精选分类</h3>
         <div class="bigbox">
            <div class="box"><div class="box1"><img src="e0c584711c2543d1fd5688f2f1a172ae.png" alt=""></div><a href="#">真无线</a></div>
            <div class="box"><div class="box1"><img src="3aef95fc448509541b09a523e393d0b3.png" alt=""></div><a href="#">轻薄本</a></div>
           <div class="box"><div class="box1"><img src="59bbeda283e9d0bbc8a41d8f0c3ad17e.png" alt=""></div><a href="#">智能配件</a></div> 
            <div class="box"><div class="box1"><img src="445dc097_3b71_4222_b63d_0953da951410.png" alt=""></div><a href="#">数字系列</a></div>
            <div class="box"><div class="box1"><img src="dbdf193297ee3586bb98186d8aaa8725.png" alt=""></div><a href="#">小爱音箱</a></div>
            <div class="box"><div class="box1"><img src="8fe63dadcf8272e247eb63cf39a524f8.png" alt=""></div><a href="#">吸顶灯</a></div>
         </div>
        
         
       </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.contain {
  width: 4.14rem;
  height: 8.96rem;
  background-color: #f6f6f6;
}
.top {
  width: 4.14rem;
  height: 0.5rem;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top span {
  font-size: 0.18rem;
  text-align: center;
  line-height: 0.5rem;
  text-indent: 1.7rem;
}
.top img {
  width: 0.33rem;
  height: 0.33rem;
  transform: translateX(-0.6rem);
}
.bottom {
  width: 4.14rem;
  display: flex;
  justify-content: space-between;
}
.bottom .left {
  width: 1.03rem;
  background-color: red;
   overflow-y: auto;
}
.bottom .left li{
  width: 0.8rem;
  height: 0.26rem;
  padding: 0.1rem;
  text-align: center;
}
.bottom .left li a{
  display: inline-block;
  font-size: 0.14rem;
  transform: translateY(-0.8rem);
}
.bottom .right {
  width: 2.88rem;
  background-color: green;
  margin: 0.05rem;
}
.bottom .right .top{
  width:2.88rem ;
  height: 0.8rem;
  border-radius: 0.1rem;

}
.bottom .right .top img{
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
  transform: translateX(0.01rem);
}
.bottom .right .sort{
  width: 2.68rem;
  height:2.58rem ;
  border-radius: 0.1rem;
  background-color: #fff;
  margin-top: 0.1rem;
  padding: 0.1rem;
}

.bottom .right .sort h3{
  font-size:0.16rem ;
  line-height: 0.32rem;
}
.bottom .right .sort .bigbox{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  transform: translateY(0.1rem);
}
.bottom .right .sort .box{
  width: 0.7rem;
  height: 1rem;
  text-align: center;
  margin-top: 0.05rem;
}
.bottom .right .sort .box .box1{
  width: 0.7rem;
  height: 0.7rem;
  background-color: #f8f8f8;
  line-height: 0.7rem;
  text-align: center
}
.bottom .right .sort .box .box1 img{
  width:80% ;
  height: 80%;
  transform: translateY(-0.1rem);
}
.bottom .right .sort .box  a{
  font-size: 0.12rem;
  line-height: 0.24rem;
  display: inline-block;
  transform: translateY(-0.8rem);
}
</style>